<template>
  <div class="app-container">
    <el-container>
      <el-header>
        <h4>快递员详情界面</h4><hr>
      </el-header>
      <el-main>
        <el-row>
          <el-col :span="4">
            <img :src='courier.avatar'>
          </el-col>
          <el-col :span="6">
            真实姓名:{{courier.name}}
          </el-col>
          <el-col :span="6">
            快递公司:{{courier.courierCompany}}
          </el-col>
          <el-col :span="6">
            会员状态:{{courier.status==0?'禁用':'正常'}}
            <el-button type="danger" size="small" v-if="courier.status==1" @click="updateStatus(courier)">禁用</el-button>
            <el-button type="danger" size="small" v-if="courier.status==0" @click="updateStatus(courier)">启用</el-button>
          </el-col>
          <el-col :span="6">
            手机号码:{{courier.phone}}
          </el-col>
          <el-col :span="6">
            实名认证:{{courier.realNameAuthenticationStatus==0?'未认证':'已认证'}}
          </el-col>
          <el-col :span="6">
            登录密码:{{login.loginPasswordStatus==99?'账号未设置':login.loginPasswordStatus==0?'未设置':'已设置'}}
            <el-button type="danger" v-if="login.loginPasswordStatus==0||login.loginPasswordStatus==1" size="small" @click="resetLoginPassword(courier.id)">重置</el-button>
          </el-col>
          <el-col :span="6">
            注册类型:{{courier.registrationType==0?'自主注册':'手工创建'}}
          </el-col>
          <el-col :span="6">
            会员余额:{{account.totalBalance==null?'账户未设置':account.totalBalance.toFixed(2)}}
          </el-col>
          <el-col :span="6">
            支付密码:{{login.paymentPasswordStatus==99?'账号未设置':login.paymentPasswordStatus==0?'未设置':'已设置'}}
            <el-button type="danger" size="small" v-if="login.paymentPasswordStatus==0||login.paymentPasswordStatus==1" :disabled="login.paymentPasswordStatus==1?false:true" @click="resetPaymentPassword(courier.id)">置空</el-button>
          </el-col>
        </el-row>
        <el-tabs>
          <el-tab-pane label="基本信息" @Click="getLoginInformation(this.courierId)" name="first">
            ID:{{courier.id}}<br>
            真实姓名:{{courier.name}}<br>
            手机号码:{{courier.phone}}<br>
            会员状态:{{courier.status==0?'禁用':'正常'}}<br>
            注册类型:{{courier.registrationType==0?'自主注册':'手工创建'}}<br>
            登录密码:{{login.loginPasswordStatus==99?'账号未设置':login.loginPasswordStatus==0?'未设置':'已设置'}}<br>
            创建日期:{{courier.createTime}}<br>
            最近登录时间:{{login.loginTime==null?'账号未设置':login.loginTime }}
          </el-tab-pane>
          <el-tab-pane label="快递员认证" name="second">
            <span v-if="courierCertificationReview==null">
              快递员未认证
            </span>
            <span v-if="courierCertificationReview!=null">
              认证状态:{{courierCertificationReview.status==0?'待审核':courierCertificationReview.status==1?'已认证':'认证未通过'}}<br>
              证件类型:{{courierCertificationReview.documentType==0?'工牌/名片':'身份证'}}<br>
              <el-row>
                <el-col :span="6">工牌或名片照片</el-col>
                <el-col :span="18">
                  <img :src="courierCertificationReview.workIdPhoto" style="width: 400px;height: 200px">
                </el-col>
              </el-row>
            </span>
          </el-tab-pane>
          <el-tab-pane label="实名认证" name="third">
            <span v-if="realNameCertificationReview==null">
              未实名认证
            </span>
            <span v-if="realNameCertificationReview!=null">
              认证状态:{{realNameCertificationReview.status==0?'待审核':realNameCertificationReview.status==1?'已认证':'认证未通过'}}<br>
              证件类型:{{realNameCertificationReview.documentType==0?'工牌/名片':'身份证'}}<br>
              <el-row>
                <el-col :span="4">证件正面</el-col>
                <el-col :span="20">
                  <img :src="realNameCertificationReview.frontOfTheCredential" style="width: 400px;height: 200px">
                </el-col>
                <el-col :span="4">手持证件正面照</el-col>
                <el-col :span="20">
                  <img :src="realNameCertificationReview.pictureOfHoldingTheFrontOfTheCredential" style="width: 400px;height: 200px">
                </el-col>
              </el-row>
            </span>
          </el-tab-pane>
          <el-tab-pane label="银行卡信息" name="fourth">
            <span v-if="bankCard==null">
              银行卡号未绑定
            </span>
            <span v-if="bankCard!=null">
              绑定状态:{{bankCard.bindingStatus==0?'未绑定':'已绑定'}}<br>
              国家:{{bankCard.country}}<br>
              开户银行:{{bankCard.depositTakingBank}}<br>
              银行卡号:{{bankCard.bankCardNumber}}<br>
              开户人:{{bankCard.accountHolder}}<br>
              绑定时间:{{bankCard.bindingTime}}
            </span>
          </el-tab-pane>
          <el-tab-pane label="账户信息" name="fifth">
            会员余额:{{account.totalBalance==null?'账户未设置':account.totalBalance.toFixed(2)}}<br>
            支付密码:{{login.paymentPasswordStatus==99?'账号未设置':login.paymentPasswordStatus==0?'未设置':'已设置'}}<br>
            账户状态:{{account.status==null?'账户未设置':account.status==0?'正常':'冻结'}}
            <el-button type="danger" size="small" :disabled="account.status==0?false:true" @click="updateStatusById(courier.id)">冻结</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import {getCourier,updateStatus,resetLoginPassword,resetPaymentPassword} from "@/api/personnel/courier";
import {getLoginInformation} from "@/api/personnel/loginInformation";
import {getCourierCertification,getRealNameCertification} from "@/api/personnel/certificationReview";
import {selectEAccountByPid,updateStatusById} from "@/api/finance/account";
import {getBankCardByAccountHolder} from "@/api/personnel/bankCard";
export default {
  name: "Details",
  created() {
    const courierId = this.$route.params && this.$route.params.courierId;
    this.courierId=courierId;
    this.getCourier(this.courierId);
  },
  activated() {
    this.getCourier(this.courierId);
  },
  data() {
    return {
      courierId: '',
      //快递员信息
      courier:{},
      //登录信息状态
      loginStatus:0,
      //登录信息
      login:{},
      //快递员认证
      courierCertificationReview:{},
      //实名认证
      realNameCertificationReview:{},
      //银行卡认证
      bankCard:{},
      //账户信息
      account:{},
    }
  },
  methods:{
    getCourier(id){
      getCourier(id).then(response=>{
        this.courier=response.data;
        this.getLoginInformation();
        this.getCourierCertification();
        this.getRealNameCertification();
        this.getBankCardByAccountHolder();
        this.getAccount();
      })
    },
    getLoginInformation(){
      getLoginInformation(this.courier.lid).then(response=>{
          this.login=response.data;
      })
    },
    getCourierCertification(){
      getCourierCertification(this.courier.id).then(response=>{
        this.courierCertificationReview=response.data;
      })
    },
    getRealNameCertification(){
      getRealNameCertification(this.courier.id).then(response=>{
        this.realNameCertificationReview=response.data;
      })
    },
    getBankCardByAccountHolder(){
      getBankCardByAccountHolder(this.courier.name).then(response=>{
        this.bankCard=response.data;
      })
    },
    getAccount(){
      selectEAccountByPid(this.courier.id).then(response=>{
        this.account=response.data;
      })
    },
    updateStatus(row) {
      updateStatus(row).then(response => {
        if (row.status == 0) {
          this.$message.success("启用成功");
        } else {
          this.$message.success("禁用成功");
        }
        this.getCourier(this.courierId);
      })
    },
    resetLoginPassword(lid){
      resetLoginPassword(lid).then(response=>{
        this.$message.success("重置成功");
        this.getCourier(this.courierId);
      })
    },
    resetPaymentPassword(lid){
      resetPaymentPassword(lid).then(response=>{
        this.$message.success("置空成功");
        this.getCourier(this.courierId);
      })
    },
    updateStatusById(id){
      this.$confirm('您确定要冻结该快递员账户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateStatusById(id).then(response=>{
            this.$message.success("冻结成功");
            this.getCourier(this.courierId);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消冻结'
          });
        });
    }
  }
}
</script>
<style>
img,
span {
  display: inline-block;
  vertical-alignment: middle;
}
</style>
